import React, { Component, PropTypes } from 'react';
import ScrollableTabView from 'react-native-scrollable-tab-view';
// import TabBar from './TabBar';
import TabBar from '../../containers/TabBarContainer';
import Home from '../../containers/HomeContainer';
import Datas from '../../containers/UsersContainer';
import Mys from '../../containers/MysContainer';

const titles = ['线索', '数据', '我的'];
const icons = [
  require('../../img/home/hHomeNormal.png'),
  require('../../img/home/hDataNormal.png'),
  require('../../img/home/hMeNormal.png'),
];
const selectedIcons = [
  require('../../img/home/hHomeFocus.png'),
  require('../../img/home/hDataFocus.png'),
  require('../../img/home/hMeFocus.png'),
];

class Footer extends Component {
  static propType = {
    page: PropTypes.number,
  };
  // _onChangeTab = ({i}) => RootStore.barStyle = i == 1 ? 'default' : 'light-content'
  render() {
    const initialPage = this.props.page ? this.props.page : 0;
    return (
      <ScrollableTabView
        renderTabBar={() =>
          <TabBar
            tabNames={titles}
            tabIcons={icons}
            selectedTabIcons={selectedIcons}
          />
        }
        initialPage={initialPage}
        tabBarPosition="bottom"
        locked
        scrollWithoutAnimation
      >
        <Home tabLabel="Home" navigator={this.props.navigator} />
        <Datas tabLabel="Datas" navigator={this.props.navigator} />
        <Mys tabLabel="Mys" navigator={this.props.navigator} />
      </ScrollableTabView>
    );
  }
}

export default Footer;
